<template>
    <div>
        <h2>Home组件内容</h2>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
                </li>
                <li>
                    <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        beforeDestroy(){
            console.log('Home组件即将被销毁了');
        },
        mounted(){
            console.log('Home组件挂载完毕了',this)
            /**
             * 用于浏览器上判断多个组件的$route和$router是否都是同一个
             * 切换组件之后，浏览器控制台上输入：
             * aboutRoute === homeRoute   　输出：false
             * aboutRouter === homeRouter   输出：true
             * */
            window.aboutRoute = this.$route
            window.aboutRouter = this.$router
        }
    }
</script>

<style>

</style>